<template>
  <el-form-item label="频道" prop="channelId">
    <!-- 用户切换选项后触发 change事件 , 自动传入选中状态-->
    <!-- :value 为select的属性, 作用是绑定值 ;
    值value 为prop中定义的用来接收父组件传来的参数-->
    <el-select
    @change="hChange"
    :value='value'
    placeholder="请选择频道">

      <!-- v-for 中的key: 必须写! 表示循环项之间的区别, key的值必须具有唯一性 -->
      <!-- label: 显示的值 ; value: 每个项对应的value, 即选中时值 -->
      <el-option
      v-for="(channel, index) in channels"
      :key="index"
      :label="channel.name"
      :value="channel.id"></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: 'channel',
  // 接收父组件传入的值
  props: ['value'],
  data () {
    return {
      // 文章频道数据
      channels: []
    }
  },
  created () {
    this.loadChannel()
  },
  methods: {
    hChange (val) {
      // 选项改变时, 向父组件传值
      this.$emit('input', val)
      console.log('选中!' + val)
    },
    // 发送 获取文章频道 请求
    async loadChannel () {
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/channels'
        })
        this.channels = res.data.data.channels
        // console.log(this.channels)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style>

</style>
